<template>
  <div>
    <p @click="changeMessage()">{{ message }}</p>
    <p @click="methods.changeMessage2()">{{ state.message }}</p>
    <p @click="changeMessage3()">{{ state.lowerCaseMessage }}</p>
    <p>{{ newMessage }}</p>
    <teleport to="#teleport-target">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </teleport>
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
// 声明一些额外的配置选项
export default {
  name: "TestScriptSetup",
  components: {
    HelloWorld,
  },
  inheritAttrs: false,
  customOptions: {},
};
</script>
<script setup lang="ts">
interface State {
  message: string;
  lowerCaseMessage: string;
}
import {
  ref,
  reactive,
  onMounted,
  computed,
  watch,
  watchEffect,
  onRenderTracked,
  onRenderTriggered,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  defineProps,
  defineEmits,
  defineExpose,
  useSlots,
  useAttrs,
} from "vue";

const props = defineProps({
  propsData: {
    type: String,
    default: "",
  },
});

const message = ref(new Date().toString());
const state: State = reactive({
  message: new Date().toString(),
  lowerCaseMessage: computed(() => state.message.toLowerCase()),
});

//computed
const newMessage = computed(() => {
  return message.value + Math.random().toString();
});

//beforeCreate created
setTimeout(() => {
  message.value = "1";
}, 1000);

//method
const changeMessage = () => {
  message.value = "hello";
};
const methods = {
  changeMessage2() {
    message.value = "hello2";
  },
  changeMessage3() {
    message.value = "hello3";
  },
};

const slots = useSlots();
const attrs = useAttrs();
console.log(slots, attrs);

// 定义emit事件
const emit = defineEmits({
  onSubmit: null,
});

function onClick() {
  emit("onSubmit", { val: props.propsData });
}
console.log(onClick);

onMounted(() => {
  console.log(props /*, context, context.emit, context.attrs, context.slots*/);
  // const timer = setInterval(()=>{
  //     message.value = Math.random().toString();
  //     state.message = Math.random().toString();
  // },1000);
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});
onUpdated(() => {
  console.log("onUpdated");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});
onUnmounted(() => {
  console.log("onUnmounted");
});
//当一个 reactive对象属性或一个ref被追踪时触发
onRenderTracked((e) => {
  console.log("onRenderTracked:", e);
});
//依赖项变更被触发时
onRenderTriggered((e) => {
  console.log("onRenderTriggered:", e);
});
onErrorCaptured((e) => {
  console.log("onErrorCaptured:", e);
});

//watch
watch([message, state.lowerCaseMessage], (newVal) => {
  //可以监听多个值
  console.log("watch:" + newVal);
});
watchEffect(() => {
  // watch 副作用函数 首次加载会触发,当值发生变化也会触发
  console.log("message.value:" + message.value);
});

const aaa = 1;
const bbb = ref(2);
defineExpose({
  aaa,
  bbb,
});
</script>

<style scoped></style>
